/**
 * Fonts
 */

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/**
  * Reset
  */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-image: url("../images/back.png");
    background-position: right -300px bottom;
    background-repeat: no-repeat;
    color: #00bfd8;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-align: justify;
    font-size: 20px;
}


/**
  * Global Rules
  */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0d0d0d;
    font-family: Roboto, sans-serif;
    line-height: 1.2;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 35px;
}

a,
a:visited {
    background-color: transparent;
    color: #00bfd8a6;
    text-decoration: none;
    border-bottom: 1px dotted;
}

a:hover,
a:active {
    border-bottom: none;
    outline: 0;
}

a:focus {
    border-bottom: none;
    outline: thin dotted;
}

a img {
    border: 0;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

footer .credits {
    font-size: 1rem;
}


/**
  * Tabs Container
  */

.tabs-container {
    padding: 2rem;
}


/**
  * Tabs Block
  */

.tabs-block {
    display: flex;
    align-items: center;
    justify-content: center;
}


/**
  * Tabs
  */

.tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.tabs label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    margin-right: 0.0625rem;
    cursor: pointer;
    background-color: #00bfd8b2;
    color: rgb(19, 6, 6);
    font-family: Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    transition: background-color ease 0.3s;
}

.tabs label .material-icons {
    margin-right: 0.3rem;
}

.tabs .tab {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    display: none;
    padding: 1rem 2rem;
    color: #000;
    background-color: rgba(255, 255, 255, 0.541);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}

.tabs .tab>*:not(:last-child) {
    margin-bottom: 0.8rem;
}

.tabs [type=radio] {
    display: none;
}

.tabs [type=radio]:checked+label {
    background-color: #fff;
    color: #00bfd8;
    border-top: 4px solid #00bfd8;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}

.tabs [type=radio]:checked+label+.tab {
    display: block;
}

@media (min-width: 768px) {
    body {
        font-size: 1.125rem;
    }
    .tabs-container {
        padding: 4rem 4rem;
    }
    .tabs label {
        order: 1;
        width: auto;
    }
    .tabs .tab {
        order: 9;
    }
    .tabs [type=radio]:checked+label {
        border-bottom: none;
    }
}

@media (min-width: 992px) {
    .tabs {
        width: 800px;
    }
}


/* Para 600px */

@media only screen and (max-width: 620px) and (min-width: 501px) {
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    form,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 0;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-align: justify;
        font-size: 13px;
    }
}


/* Para 480px */

@media only screen and (max-width: 500px) and (min-width: 341px) {
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    form,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 0;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-align: justify;
        font-size: 13px;
    }
}


/* Para 320px */

@media only screen and (max-width: 340px) and (min-width: 5px) {
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    form,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 0;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-align: justify;
        font-size: 13px;
    }
}