/* All element styling */

* {
    box-sizing: border-box;
    margin: 0;
    outline: none;
}

/* font-families */

@font-face {
    font-family: 'damion';
    src: url('../fonts/Damion-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'sombrero';
    src: url('../fonts/SombreroLight.ttf') format('truetype');
}

@font-face {
    font-family: 'playpensans';
    src: url('../fonts/PlaypenSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'playpensans light';
    src: url('../fonts/PlaypenSans-Light.ttf') format('truetype');
}

/* body properties */

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/desert_3.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100dvh;
    font-family: 'sombrero', 'Arial', 'Helvetica', 'sans-serif';
}

.envelope-all-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100dvw;
}

/* All sections HTML-Sections */

#message-to-turn-device {
    display: none;
}

.sound-container {
    z-index: 9999;
    right: 5%;
    cursor: pointer;
    position: absolute;
    top: 15%;
}

.style-container {
    padding: 4px;
    border: 4px solid black;
    border-radius: 16px;
}

#control-panel-throw-jump {
    display: flex;
    justify-content: space-around;
    width: 20%;
}

#control-panel-left-right {
    display: flex;
    justify-content: space-around;
    width: 20%;
}

.canvas-container .sound-container img:nth-child(2) {
    width: 32px;
    display: block;
}

/* all-icons-container properties */

.all-icons-container {
    font-size: 14px;
    width: 100%;
    gap: 18px;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    text-align: center;
    border: 2px solid black;
    padding: 8px;
    background-color: rgba(236, 199, 148, 0.5);
}

#all-icons-container-mini-version {
    font-family: 'playpensans light';
    font-size: 16px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    gap: 6%;
    left: 0;
    z-index: 20;
    text-align: center;
    border: 4px solid black;
    padding: 8px;
    background-color: rgba(200, 200, 0, 1);
}

#all-icons-container-mini-version a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}


.all-icons-container-mini-version img {
    width: 24px;
    align-self: flex-end;
    cursor: pointer;
}

.all-icons-container a {
    font-family: 'playpensans light';
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 2px;
}

.all-icons-container h2 {
    font-family: 'playpensans';
    font-size: 24px;
}

/* Canvas-container section properties */

.canvas-container {
    display: none;
    position: relative;
}

canvas {
    display: block;
    width: 720px;
    height: 480px;
    background-color: black;
    z-index: 1;
}

.screen-control-container {
    display: flex;
    justify-content: center;
    z-index: 10001;
    position: absolute;
    bottom: 2%;
    right: 1%;
}

#sound-on-icon {
    display: flex;
    justify-content: center;
    align-content: center;
    border: 4px solid black;
    padding: 4px;
    background-color: wheat;
    width: 60px;
}

#sound-off-icon {
    display: none;
    justify-content: center;
    align-content: center;
    border: 4px solid black;
    padding: 4px;
    background-color: wheat;
    width: 60px;
}

/* fullscreen and minimize-button properties */

.fullscreen-mode {
    height: 100%;
    width: 100%;
}

.normal-mode {
    height: 480px;
    width: 720px;
}