@import url("./reset.css");
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');

:root {
    --tropical-main: #ff9777f6;

    --header-height: 50px;
}

.mr-dafoe-regular {
  font-family: "Mr Dafoe", cursive;
  font-weight: 400;
  font-style: normal;
}

html {
    width: 100%;
    height: 100%;
    /* background-color: blue; */
}

body {
    width: 100%;
    height: 100%;
    /* background-color: red; */
}

header {
    position: relative;
    width: 100%;
    height: var(--header-height);
    /* padding: 10px; */
    .banner-text {
        padding: 10px;
        font-size: 50px;
    }
    .alt-banner-text {
        /* text-shadow: 0 0 20px #ff48007e; */
        text-shadow: 0 0 8px var(--tropical-main);
    }
    .alt-banner-text-2 {
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bolder;
        font-size: 38px;
    }
    .contact-info {
        position: absolute;
        right: 0;
        width: fit-content;
        height: var(--header-height);
        /* background-color: yellow; */

        .inner-container {
            position: relative;
            width: 200px;
            height: 100%;
            padding: 0 5px;

            .text-actual {
                /* width: 100%; */
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
    background-color: whitesmoke;
}

.left {
    position: absolute;
    left: 0;
}

.right {
    position: absolute;
    right: 0;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    /* position: relative; */
    width: 100%;
    height: 100%;
    /* padding: 10px; */
    .main-text {
        color: black;
        font-size: 50px;
        text-shadow: 0 0 10px whitesmoke;
    }
    background-color: var(--tropical-main);
}

footer {
    position: fixed;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
    .footer-text {
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 12px;
        color: #ff9777;
        text-align: center;
    }
    background-color: #080114e7;
}

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

    header {
        .contact-info {
            position: relative;
        }
    }

}