@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

/* Global */
*{
    font-family: 'Teko', sans-serif;
    cursor: default;
}

html{
    background-color: rgb(42, 184, 38);
    background: linear-gradient(135deg, rgba(42,184,38,1) 0%, rgba(143,59,163,1) 100%);
    background-attachment: fixed;
}

body{
    font-size: 200%;
    margin-left: 10%;
    margin-right: 10%;
    background-color: rgb(250, 234, 214, 0.25);
}

li{
    list-style: none;
    list-style-type: none;
}

ul{
    list-style: none;
    list-style-type: none;
}

img{
    width: 5em;
    height: 5em;
    vertical-align: center;
}

p{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: black;
}

/* Header */
#header{
    background-color: grey;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#navhome{
    padding: 2%;
    margin: 0;
}

#navabout{
    padding: 2%;
    margin: 0;
}

/* Introduction */
#introduction{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hello{
    font-size: 300%;
    padding: 0;
    margin: 0;
}

/* Links */
#youtubeimg{
    width: auto;
}

#socials{ 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
}

#twitch{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
}

#instagram{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
}

#youtube{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
}

#discord{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* Development (Currently out of use)*/
#logs{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#identifier{
    font-size: 175%;
    padding: 0;
    margin: 0;
}

#textspace{
    display: none;
    width: 75%;
    border:none;
}


/* Portfolio */
video{
    width: 480px;
    height: auto;
}

#vids{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.vidcontent{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ytbox{
    width: 480px;
    height: 270px;
}

.title{
    margin: 0;
    padding: 0;
}

.content{
    margin: 0;
}

#music{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.audiocontent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width: 414px){
    body{
        font-size: 77%;
    }

    #twitch{
        margin-left: 5px; margin-right: 5px;
    }

    #instagram{
        margin-left: 5px; margin-right: 5px;
    }

    #youtube{
        margin-left: 5px; margin-right: 5px;
    }

    #discrod{
        margin-left: 5px; margin-right: 5px;
    }
}