/*Tipos de Letra------------------------------------------------------------------------*/

@font-face {
    font-family: dancing;
    src: url(../fonts/DancingScript-VariableFont_wght.ttf);
}

@font-face {
    font-family: courgette;
    src: url(../fonts/Courgette-Regular.ttf);
}

@font-face {
    font-family: merienda;
    src: url(../fonts/Merienda-VariableFont_wght.ttf);
}

/*Index----------------------------------------------------------------------------------*/

html {
    scroll-behavior: smooth;
}

#index_body {
    width: 98%;
    background-image: url(../img/ship1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

#menu {
    position: sticky;
	top: 0;
	padding: 10px;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 70px;
    background-color: black;
    color: rgb(255, 222, 34);
    font-size: 150%;
    border-radius: 50px 50px 50px 50px;
    border: solid gold 3px;
    z-index: 1;
}

#menu p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 50px;
    background-color: rgb(36, 36, 36);
    border: solid white 2px;
    border-radius: 10px 10px 10px 10px;
    font-family: dancing;
    text-transform: uppercase;
    text-shadow: black 2px 2px;
    transition: all 1s;
}

#menu p:hover {
    width: 180px;
    height: 80px;
    box-shadow: inset black 10px 10px 10px;
    transition: all 0.5s;
}

#menu p:active {
    border: solid red 2px;
    background-color: rgb(124, 124, 124);
    box-shadow: inset black 5px 5px 5px;
    transition: all 0.1s;
}

#titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 80px;
    text-transform: uppercase;
    text-shadow: black 2px 2px;
    font-family: merienda;
    font-size: 240%;
    background-image: url(../img/ship4.jpg);
    background-size: 100%;
    background-position-y: 200px;
    border-radius: 20px 5px 20px 5px;
    border: solid gold 2px;
    margin-left: 35%;
    transition: all 0.7s;
}

#titulo:hover {
    filter: drop-shadow(5px 5px 3px black);
    transform: scale(1.3);
    transition: all 0.5s;
}

iframe {
    width: 80%;
    height: 800px;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 10px 10px 10px 10px;
    box-shadow: black 10px 10px 10px;
    transition: all 2s;
}

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

#index_body footer {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 1%;
    margin-bottom: 1%;
}

#index_body footer a {
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(36, 36, 36);
    border: solid gold 2px;
    border-radius: 10px;
    box-shadow: black 5px 5px 3px;
}

/*Inicio------------------------------------------------------------------------*/

#inicio_body {
    background-image: url(../img/paper.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
}

#inicio_body div {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    border: solid gold 3px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: black 5px 5px 3px;
    color: white;
    background-color: rgb(49, 49, 49);
    margin-bottom: 5%;
    padding-left: 20px;
    padding-right: 20px;
}

#inicio_body h1 {
    font-family: dancing;
    text-transform: uppercase;
    color: gold;
    text-shadow: black 4px 4px 3px;
}

#inicio_body p {
    font-family: courgette;
    text-shadow: black 3px 3px 2px;
}

#inicio_logo img {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    margin-bottom: 3%;
    margin-left: 5%;
    filter: drop-shadow( 4px 4px 3px);
}

#inicio_body div img{
    border: solid red 2px;
    border-radius: 50px 50px 50px 50px;
    margin-bottom: 1%;
}

#botones {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    margin-left: 3%;
}

#botones img {
    width: 150px;
    height: 150px;
    border: double gold 5px;
    border-radius: 30px 15px 30px 15px;
    background-image: url(https://img4.goodfon.com/wallpaper/nbig/7/cc/transatlantic-ships-britannia-korabl-volny.jpg);
    background-size: 200%;
    background-position-x: 250px;
    background-position-y: 150px;
    box-shadow: black 4px 4px 3px;
    margin-bottom: 2%;
    filter: sepia(100%);
    transition: all 1s;
}

#botones img:hover {
    filter: sepia(0%);
    box-shadow: black 7px 7px 5px;
    transform: scale(1.1);
    transition: all 0.3s;
}

/*compañias------------------------------------------------------------------------*/

#companias_body {
    width: 98%;
    background-image: url(../img/ship2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}

#companias_body iframe {
    margin-top: 3%;
    height: 700px;
}

#logos {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 81%;
    height: 120px;
    background-image: url(../img/waves.jpg);
    background-size: 100%;
    border: solid 3px red;
    border-radius: 100px 100px 100px 100px;
    margin-top: 3%;
    margin-left: 10%;
    margin-right: 10%;
}

#logos img {
    width: 100px;
    height: 100px;
    filter: drop-shadow(3px 3px 2px black);
    transition: all 1.5s;
}

#logos img:hover {
    filter: drop-shadow(4px 4px 3px black);
    transform: rotate(40deg) scale(1.2);
    transition: all 0.3s;
}

/*compañias_wsl------------------------------------------------------------------------*/

#wsl_body {
    background-image: url(../img/paper.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
}

#wsl_body div {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    border: solid red 3px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: black 5px 5px 3px;
    color: gold;
    background-color: rgb(49, 49, 49);
    margin-bottom: 5%;
    padding-left: 20px;
    padding-right: 20px;
}

#wsl_body h1 {
    font-family: dancing;
    text-transform: uppercase;
    color: White;
    text-shadow: black 4px 4px 3px;
}

#wsl_body p {
    font-family: courgette;
    text-shadow: black 3px 3px 2px;
}

#wsl_logo img {
    width: 225px;
    height: 200px;
    margin-bottom: 4%;
    margin-left: 3%;
    filter: drop-shadow( 5px 5px 2px);
}

#wsl_body div img {
    border: solid white 2px;
    border-radius: 50px 50px 50px 50px;
    margin-bottom: 1%;
}

/*compañias_cgt------------------------------------------------------------------------*/

#cgt_logo img {
    width: 300px;
    height: 200px;
    margin-bottom: 4%;
    margin-left: 5%;
    filter: drop-shadow( 5px 5px 2px);
    border-radius: 5%;
}

/*compañias_usl---------------------------------------------------------------------*/

#usl_logo img {
    width: 270px;
    height: 245px;
    margin-bottom: 4%;
    margin-left: 3%;
    filter: drop-shadow( 5px 5px 2px);
}

/*navios------------------------------------------------------------------------*/

#navios_body {
    width: 98%;
    background-image: url(../img/ship3.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-content: center;
}

#navios_body iframe {
    margin-top: 3%;
    height: 700px;
}

/*navios_menu-------------------------------------------------------------------------*/

#navios_menu {
    background-image: url(../img/paper.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

#navios_menu div {
    display: flex;
    flex-direction: column;
    color: gold;
    border: solid red 3px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: black 5px 5px 3px;
    background-color: rgb(49, 49, 49);
    margin-top: 5%;
    padding-left: 20px;
    padding-right: 20px;
}

#navios p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: black;
    border-radius: 15px 15px 15px 15px;
    border: solid gold 3px;
    box-shadow: black 7px 7px 3px;
    font-family: merienda;
    font-size: 150%;
    text-transform: uppercase;
    text-decoration: underline;
    transition: all 0.5s;
}

#navios p:hover {
    box-shadow: black 0 0 0;
    transform: scale(0.9);
    transition: all 0.5s;
}

#navios p:active {
    border: solid red 3px;
    transition: all  0.3s;
}

/*wsl_titanic------------------------------------------------------------------------*/

#navios_wsl {
    background-image: url(../img/paper.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
}

#navios_wsl div {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    border: solid white 3px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: black 5px 5px 3px;
    color: red;
    background-color: rgb(49, 49, 49);
    margin-bottom: 5%;
    padding-left: 20px;
    padding-right: 20px;
}

#navios_wsl h1 {
    font-family: dancing;
    text-transform: uppercase;
    color: gold;
    text-shadow: black 4px 4px 3px;
}

#navios_wsl p {
    font-family: courgette;
    text-shadow: black 3px 3px 2px;
}

#navios_wsl div img {
    border: solid gold 2px;
    border-radius: 50px 50px 50px 50px;
    margin-bottom: 1%;
}

/*Tablet------------------------------------------------------------------------------------*/

@media screen and (max-width: 1050px) {

/*Index-------------------------------*/

    #index_body {
        width: 98%;
        background-image: url(../img/ship7.jpg);
        background-size: 100% 100%;
        background-repeat: repeat;
    }

    #menu {
        width: 97%;
    }

    #menu p {
        border-color: red;
        filter: sepia(100%);
    }

    #menu p:hover {
        filter: sepia(0%);
    }

    #titulo {
        margin-left: 20%;
        filter: sepia(100%);
    }

    #titulo:hover {
        filter: sepia(0%) drop-shadow(5px 5px 3px black);
        transform: scale(1.1);
        transition: all 0.5s;
    }

/*Inicio----------------------------------*/

    #inicio_body {
        background-image: linear-gradient(
        rgb(163, 163, 163) 10%,
        rgb(83, 83, 83) 90%);
    }

/*Compañias-------------------------------*/

    #companias_body {
        width: 97%;
        background-image: url(../img/ship7.jpg);
        background-size: 100% 100%;
        background-repeat: repeat;
    }

    #logos {
        background-size: 100% 100%;
    }

    #companias_body iframe {
        margin-top: 3%;
        height: 800px;
    }

/*compañias_wsl---------------------------*/

    #wsl_body {
        background-image: linear-gradient(
        rgb(163, 163, 163) 10%,
        rgb(83, 83, 83) 90%);
}

/*navios----------------------------------*/
    #navios_body {
        width: 97%;
        background-image: url(../img/ship7.jpg);
        background-size: 100% 100%;
        background-repeat: repeat;
    }

    #navios_body iframe {
        margin-top: 3%;
        height: 800px;
    }

/*navios_menu----------------------------------*/

    #navios_menu {
        background-image: linear-gradient(
        rgb(163, 163, 163) 10%,
        rgb(83, 83, 83) 90%);
    }

/*wsl_titanic----------------------------------*/

    #navios_wsl {
        background-image: linear-gradient(
        rgb(163, 163, 163) 10%,
        rgb(83, 83, 83) 90%);
    }

}
    
/*Movil-------------------------------------------------------------------------------------*/

@media screen and (max-width: 720px) {

/*Index--------------------------------------------*/

    #index_body {
        width: 98%;
        background-image: url(../img/ship8.png);
        background-size: 100% 100%;
        background-attachment: unset;
    }

    #menu {
        background-color: unset;
        border: unset;
    }

    #menu p {
        filter: sepia(0%);
    }

    #menu p:hover {
        border-radius: 10px 50px 10px 50px;
    }

    #titulo {
        width: 100%;
        height: 80px;
        background-image: none;
        border-radius: 10px 50px 10px 50px;
        filter: sepia(0%) drop-shadow(5px 5px 3px black);
        margin-left: 0;
        transition: all 0.5s;
    }

    #titulo:hover {
        transform: scale(0.9);
        filter: none;
        transition: all 0.5s;
    }

/*Inicio-----------------------------------------------*/

    #inicio_logo img {
        display: none;
    }
    
/*Compañias--------------------------------------------*/

    #companias_body {
        width: 98%;
        background-image: url(../img/ship8.png);
        background-size: 100% 100%;
        background-attachment: unset;
    }

    #logos {
        background-image: linear-gradient(
        rgb(73, 189, 243) 5%,
        rgb(40, 85, 128) 100%);
        border-radius: 10px 50px 10px 50px;
    }

    #logos img:hover {
        transform: scale(1) rotate(40deg);
    }

/*Navios-------------------------------------------------*/

    #navios_body {
        width: 98%;
        background-image: url(../img/ship8.png);
        background-size: 100% 100%;
        background-attachment: unset;
    }

/*compañias_wsl--------------------------------------------*/

    #wsl_logo img {
        display: none;
    }

/*compañias_wsl---------------------------------------------*/

    #cgt_logo img {
        display: none;
    }

/*compañias_usl----------------------------------------------*/

    #usl_logo img {
        display: none;
    }
}