a {
    color: #32CD32;
}

input {
    width: 40%;
    font-size: 20px;
    padding: 1px 10px;
}

/*input[type=textarea] {*/
/*    width: 500px;*/
/*/*    padding: 20px 20px;*/*/
/*/*    margin: 20px 0;*/*/
/*/*    box-sizing: border-box;*/*/
/*}*/


p.spacedout {
    font-family: 'Raleway';
    font-size: 18px;
    line-height: 1.5;
    text-align: justify;
}

p.halfline {
    line-height: 0.7;
}



/*textarea { vertical-align: top; }*/
textarea {
/*    box-sizing: border-box;*/
/*    -webkit-box-sizing: border-box;*/
/*    -moz-box-sizing: border-box;*/
    max-width: 40%;
    min-width: 40%;
    vertical-align: top;
    font-size: 20px;
    padding: 1px 10px;
}

/*sandwich {display:block; float:left;}*/

sandwich {vertical-align: top;}

aboutpad {padding: 18px;}

.border1 {
    border-width:13px;
    border-style:inset;
    border-color:#287EC7;
    padding: 25px;
    box-sizing: border-box;
    width: 400px;
}


* {
    box-sizing: border-box;
}

.row {
    display: flex;
}

/*https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/
/*mobile first pattern    */
/*
 .column {
 flex: 100%;
 padding: 30px;
 }
 
 @media only screen and (min-width: 1000px) {
 .column { flex: 50%; }
 }
 */

/*https://stackoverflow.com/questions/41827264/css-one-column-on-mobile-two-on-desktop*/

.end{
    column-count: 1;
    width:100%;
    column_width:100%;
}


/*(max-width: 999px)*/
@media screen and (max-aspect-ratio: 1.333) {
    .left, .right {
        width: 100%;
        padding: 5px 30px 5px 30px;
    }
}
/*(min-width: 1000px)*/
@media screen and (min-aspect-ratio: 4/3)  {
    .left {
        float: left;
        width: 50%;
        padding: 5px 30px 5px 30px;
    }
    .right {
        float: right;
        width: 50%;
        padding: 5px 30px 5px 30px;
    }
}


/*https://www.w3schools.com/cssref/atrule_media.php*/
/* two columns */

/*body {*/
/*    background-color: lightblue;*/
/*}*/


/*@media only screen and (min-width: 1100px)*/
@media only screen and (min-aspect-ratio: 4/3)

/*(orientation: landscape) (min-aspect-ratio: 4/3) */
{
    .column {
        width: 50%;
        padding: 30px;
    }
}
/* On screens that are 999px wide or less, make the columns stack on top of each other instead of next to each other */
/*@media only screen and (max-width: 1099px) orientation: portrait*/
@media only screen and (max-aspect-ratio: 4/3) {
    
/*    body {*/
/*        background-color: lightgreen;*/
/*    }*/

    .column {
        width: 100%;
        padding: 30px;
    }
}


biggertext {
/*    text-align: center;*/
    font-family: 'Raleway';
    font-size: 24px;
    /*    font-style: italic;*/
}

penguin {
    text-align: center;
    font-family: 'Raleway';
    font-size: 42px;
/*    font-style: italic;*/

}

footer {
    text-align: center;
    padding-block: 24px;
    background: #000000;
    color: #FFFFFF;
    font-family: 'Raleway';
    font-size: 14px;
/*    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,*/
/*    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,*/
/*    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;*/

.nothing {

}
}


header {
    text-align: center;
    padding-block: 24px;
    background: #000000;
    color: #FFFFFF;
    font-family: 'Raleway';
    font-size: 22px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    


    .container {
        
/*            .h1 {*/
/*                text-align: center;*/
/*                font-size: 28px;*/
/*                font-style: italic;*/
/*            }*/

        
        width: 100vw;
        scroll-padding-bottom: 100px;
        scroll-snap-type: y mandatory;
        scroll-snap-align: start;
/*        scroll-snap-stop: always;*/
/*        display: flex;*/
/*        flex-direction: row;*/
/*        align-items: center;*/
/*        @media screen and (min-width: 768px) {*/
/*            flex-direction: row;*/
/*            justify-content: space-between;*/
/*            gap: 50px;*/
/*        }*/
    }
}


.container {
    
/*    width: 100vw;*/
/*    height: 100vh;*/
    scroll-padding-bottom: 100px;
    scroll-snap-type: y mandatory;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    
}

.container img {
    height: auto;
/*    750px;*/
    width: 100%;
    object-fit: fill;
/*    overflow-y: scroll;*/
scroll-snap-align: start;

}

html { /* body won't work ¯\_(ツ)_/¯ */
    scroll-padding-bottom: 100px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-snap-type: y mandatory;
    background: #000000;
    color:white;
    font-family: 'Raleway';
    
    .img {

            display: inline-block;
            margin: 25px 10px;
        }
    
}

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
}

iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*for safari*/
body {
    scroll-padding-bottom: 100px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-snap-type: y mandatory;
    background: #000000;
    color:white;
    font-family: 'Raleway';
  
/*    .img {*/
/*        */
/*        display: inline-block;*/
/*        margin: 25px 10px;*/
/*    }*/
}

section {
    height: auto;
/*    100vh;*/
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.section img {
/*    height: auto;*/
/*    750px;*/
/*    width: 100%;*/
    height: auto;
/*100vh;*/
    width: 100vw;
    
    object-fit: fill;
    /*    overflow-y: scroll;*/

    
    
        scroll-snap-align: start;

    
    
    
    /*    scroll-behavior: auto;*/

}