/* Essa é a stylesheet das páginas. A maioria das escolhas estéticas você provávelmente consegue fazer aqui. */
*{
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}

:root {
    /* definição do esquema de cores da página */
    --main-bg: #0E1428;
    --alt-bg: #136F63;
    --text:#FFE2D1;
    --details:#03CEA4;
    --links:#D14081;
    --link-hover:#136F63;
    --link-bg: #E8B9AB;
    --header-text: #2D3130;
    --header-bg: #83C5BE;
    --math: #EA3546;
    --chem: #EF8700;
    --phys: #F9C70E;
    --bio: #04BE51;
    --comp: #0078D7;
    --footer-bg: #2D3130;
    /* definicao de gradientes para o background */
    --gradients:    linear-gradient(to right, var(--main-bg), 5%, transparent, 95%, var(--main-bg)),
                    linear-gradient(to top, var(--main-bg), 5%, transparent, 95%, var(--main-bg)),
                    linear-gradient(to right, var(--main-bg), 75%, transparent)
}

body {
    background: var(--main-bg);
    color: var(--text);
}

/* recomendações gerais para bom design */

p {
    max-width: 70ch;
}

h1 {
    color: var(--details);
}

h3 {
    color: var(--header-bg);
}
/* header da página, preferívelmente deixar uniforme */

#header {
    width: 100%;
    background-color: var(--header-bg);
    text-align: center;
}

.container{
    padding: 25px 10%;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    text-align: left;
    height: 60px;
}

/* muda o logo para telas pequenas */
@media (max-width: 799px) {
    .logo-wide {
        width: 0;
    }        
}

@media (min-width: 800px) {
    .logo-thin {
        width: 0;
    }        
}

nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--header-text);
    font-size: 18px;
    position: relative;
}

nav ul li a::after {
    content: '';
    width: 0;
    height: 3px;
    background-color: var(--details);
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.1s
}

nav ul li a:hover::after {
    width: 100%;
}

.dropdown {
    position: relative;
    display: inline-block;
    top: 5px;
}

.dropdown button{
    background-color: var(--header-bg);
    padding: 6px;
    border: none;
}

.icon {
    text-align: left;
    height: 30px;
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    padding: 15px;
    line-height: 35px;
    background-color: #fff;
    box-shadow: 4px 4px var(--details);
    z-index: 1;
}

.dropdown:hover .dropdown-list {
    display: block;
}

.dropdown:hover button {
    background-color: #fff;
}

/* about da página, descreve o caráter da atividade */

#about {
    background-color: var(--main-bg);
    /*    declarado no HTML de cada página, para pegar o background individual dela (se existe)
    background-image: url('./images/bg'), linear-gradient(to right, transparent, var(--main-bg)); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}


.tab-header {
    margin-top: 20px;
    padding: 10px 10px;
    background: linear-gradient(to right, var(--details), var(--alt-bg) 75%);
    font-size: 18px;
    font-weight: 500;
    border-top-left-radius: 5%;
    border-top-right-radius: 25%;
}


.tab-contents {
    padding: 10px 10px;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    background-color: var(--alt-bg);
    transition: 1s;
}

.tab-contents:hover {
    border-bottom-right-radius: 30% 15%;
}

.col .linklist {
    align-items: center;
}

.col .linklist .linkitem {
    text-align: center;
    background-color: #fff;
    box-shadow: 4px 4px var(--details);
    padding: 5px;
    margin-top: 30px;
    transition: 0.5s;
}

.col .linklist .linkitem:hover {
    box-shadow: 10px 10px var(--link-hover);
    transition: 0.5s;
}

.col .linklist .linkitem a {
    color: var(--header-text);
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* configurações para listas */

#list {
    padding: 20px 0;
}

.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 0;
    row-gap: 100px;
}

.col-large{
    flex-basis: 70ch;
}

.col-medium{
    flex-basis: 50ch;
}

.col-small{
    flex-basis: 35ch;
}

.col img{
    width: 100%;
    border-radius: 15px;
}

.col a {
    text-decoration: none;
    color: var(--links);
}

.col a {
    text-decoration: none;
    color: var(--links);
}

/* footer */
#footer {
    width: 100%;
    background-color: var(--footer-bg);
    text-align: left;
}

#footer a {
    text-decoration: none;
    color: var(--links);
    font-size: 18px;
}