html{
    position: relative;
    background: #a9c8d9;
    background: linear-gradient(337deg, rgba(169, 200, 217, 1) 0%, rgba(212, 195, 182, 1) 50%, rgba(232, 173, 121, 1) 100%);
    overflow-x: hidden;
}

.introduction {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: black 5px outset;
    background-color: #fad8ba;
    padding: 5px;
    width: 60vw;
}

.introduction h2 {
    margin-top: 0;
    width: 100%;
}

.credentials{
    grid-row: 2;
    border: black 5px outset;
    background-color: #fad8ba;
    padding: 5px;
    width: 60vw;
}

body {
    display: grid;
    grid-template-rows: minmax(5vh, auto) minmax(20vh, auto) minmax(30vh, auto);
    grid-template-columns: minmax(auto, 20vw) minmax(60vw, auto) minmax(auto, 20vw);
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
    background-image: url("beach.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
}

main{
    justify-self: left;
    justify-content: center;
    grid-row: 2;
    grid-column: 2;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-row-gap: 20px;
}

.collapsible-content ul li{
    list-style-type: none;
    margin-bottom: 1.5em;
}


.collapsible-section{
    transition: .15s; 
}

.collapsible-section * {
    transition: inherit;
}



.collapsible-section:not(:hover):not(:target):not(:focus)  .collapsible-content:not(:hover):not(:target) {
    visibility: collapse;
    font-size: 0;
    height: 0;
    width: 0;
    transition: .15s;
    transition-property: width, height;
}

.collapsible-section .heading{
    height: 30px;
    width: 200px;
}

.collapsible-section:not(:hover):not(:target):not(:focus) .blink::after{
    content: url("dropdown.svg");
    margin-left: 5px;
}

.collapsible-section:not(:hover):not(:target):not(:focus) .blink{

    font-size: large;
    /* animation: blink 1s linear infinite;
    min-height: fit-content; */
}

/* .heading .blink */

/* @keyframes blink{
    0% {font-size: 18px;}
    25% {font-size: 17px;}
    50% {font-size: 16px;}
    75% {font-size: 17px;}
    100% {font-size: 18px;}
} */
 */

.collapsible-section:where(:hover,:target,:focus) {
    /* font-size: inherit; */
    text-align: left;
    width: 55vw;
    transition: .15s;
}

.collapsible-content{
    text-align: left;
    transition: .25s;
    transition-property: font-size;
}

#contact-me {
    margin-top: 5vh;
    grid-row: 3;
    grid-column: 2;
}

.contact-form, form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#contact-me .contact-details {
    width: 50%;
    display: flex;
}

#contact-me h2, .message {
    width: 100%;
    display: flex;
    margin: 1em 0;
}

#contact-me :is(textarea, input) {
    flex-grow: 1;
    margin-right: 15px;
    border: solid 1px #00000047;
    border-radius: 5px;
}

#contact-me label {
    width: 4em;
}

.button-container{
    height: 40px;
    width: 40px;;
}

button {
    width: 30px;
    height: 30px;
    border: solid 1px #00000047;
    border-radius: 5px;
    background-image: url("contact-button.png");
    background-size: contain;
    cursor: pointer;
    transition: .5s;
}

button:hover {
    width: 40px;
    height: 40px;
    transition: .5s;
}

.project-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#github-projects{
    grid-row: 3;
    border: black 5px outset;
    background-color: #fad8ba;
    padding: 5px;
    width: 60vw;
}

.floating-object{
    z-index: -10;
    position: absolute; 
    animation: float-to-right 500s linear infinite;
}


@keyframes float-to-right{
    0%{ left: 50vw; }
    25%{ left: 130vw; }
    50%{ left: 50vw; }
    75%{ left: -130vw; }
    100%{ left: 50vw; }
}

@keyframes float-to-left{
    0%{ left: 50vw; }
    25%{ left: -130vw; }
    50%{ left: 50vw; }
    75%{ left: 130vw; }
    100%{ left: 50vw; }
}

#sun{
    position: absolute;
    z-index: -20;
    left: -10vw;
    top: 0;
}

img{
    width: 100%;
}