:root {
    --footer-background-color: rgb(58, 57, 58);
    --add-hour-button-size: 4vw;
    font-size: 2vw;
}

@media (min-width: 220px) { :root { font-size: 3vw; } }

@media (min-width: 360px) { :root { font-size: 15px; } }

@media (min-width: 480px) { :root { font-size: 17px; } }

@media (min-width: 768px) { :root { font-size: 18px; } }

@media (min-width: 1024px) { :root { font-size: 20px; } }

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

body {
    background: rgb(192, 192, 192);
}

.grid-container {
    margin-bottom: 10px;
    background: #ffffff;
}

#color-task {
    width: 3em;
    height: 1.55em;
}

@media (min-width: 360px) { 
    .grid-container { margin: 15px; } 
    .references-container { background-color: rgb(192, 192, 192) }
}

@media (max-width: 360px) { 
    .grid-container { padding: 10px; } 
    .hour-organizator-section { background: #ffffff; }
    .references-container { background-color: #ffffff }
}

.references-container {
    margin-left: 25px;
    margin-right: 25px;
    font-size: 22px;
}

main {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.app {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    color:black;
}

.app__img {
    width: 80px;
    height: 80px;
}

.title_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 22px;
    font-weight: bold;
    padding-top: 14px;
}

.subtitle {
    font-size: 20px;
    font-style: italic;
}

.content {
    font-size: 16px;
}

@media (min-width: 360px) {
    
}

@media (min-width: 480px) {

}

@media (min-width: 768px) {

}